@charset "utf-8";

@import "mixin";
@import "mymixin";

$hover-color: #ff6700;
$font-color-s: #9d9d9d;
$color-ss: #f0f0f0;
$font-color-h: #333;
$menu-li: 10;
$color-mild: #e0e0d1;


@media (min-width: 768px) {
body { padding-top: 50px; }
.secondul { display: none; }
.box { margin: 0 auto; max-width: 1300px; }
.mytopnav li:first-of-type a { padding-left: 0; }
.mytopnav li:not(:last-child) span { @include divider(20px); border-color: $font-color-s; }
.nav-sm { display: none; }
.mybtn-shopcar { color: $font-color-s; padding: 15px 10px; background: #424242;
                 &:hover { color: $hover-color; text-decoration: none; background: #fff; }
                 span { font-size: inherit; vertical-align: top; } }
.myshopcar-panel { display: none; position: absolute; right: 13px; top: 55px; box-shadow: -3px 3px 7px -3px #000000; color: black; vertical-align: center; }
.mymilogo {  width: 25%; background-color: $hover-color; margin-top: 15px; border-radius: 3px; }
.mygiflogo { margin-top: 10px; width: 75%; }
.mynav2search, .mynav2 { height: 73px; line-height: 73px;  }
.mynav2 a { color: $font-color-h;
		 	&:hover { text-decoration: none; color: $hover-color; } }
.mymenu { background: #333; @include opacity(0.6); z-index: 100; position: absolute; width: 100%;
		 ul { height: 100%; }
		 li { height: 100 / $menu-li * 0.99%; color: #fff; padding: 0 10%; position: relative;
		 	 &:hover { background-color: $hover-color; }
		 	 a { color: inherit; line-height: 2;
		 	 	 &:hover { text-decoration: none; } }
		 	 span { position: absolute; top: 0; right: 10%; line-height: 2; } } }
.lisay { position: absolute; top: 0; left: 100%; width: 100%; height: 100%; background: #fff; display: none; }
.mybox { background-color: #5f5750;
 		 li { padding: 5% 3%;
 			 a { @include opacity(0.6); @include transition(opacity 0.3s); font-size: 14px; color: #fff;
 				 &:hover { @include opacity(1); text-decoration: none; } } } }
.mylook { color: $font-color-s; @include transition(color 0.3s); font-size: 14px;
			&:hover { text-decoration:none; color: $hover-color; } }
article > div:nth-child(5) { background-color: #f5f5f5; }
#picleft { @include transition(box-shadow 0.3s); margin-bottom: 1px;
			&:hover { box-shadow: 2px 5px 10px $color-mild; } }
.mypic-sm { @extend #picleft; background-color: #fff; position: relative;
			img { width: 100%; max-width: 160px; margin-bottom: 15%; } }
.mydiscount { position: absolute; top: 0; left: 50%; width: 40%; margin-left: -20%; color: #fff; }
.mypic-sm-panel { width: 100%; bottom: 0; height: 30%; display: none; position:absolute; background-color: $hover-color; }
.myservices { color: $font-color-s;
			 div { border-bottom: 1px solid $color-ss; }
			 span:first-child { font-size: 20px; line-height: 3; @include transition(color .2s);
			 			&:hover{ color: $hover-color; } }
			 div:not(:last-child) span:last-child { @include divider(37%, 0, 20px); } }
.mylink { span { @include divider(10%, 16%, 65%); }
		  li { color: $font-color-s; &:hover { color: $hover-color; } } }
.mysersta { h4 { color: $hover-color; }
			p { font-size: 12px; color: $font-color-s; }
			button { color: $hover-color; @include transition(all 0.3s); &:hover { color: #fff; background-color: $hover-color; } } }
.footerlogo { margin-right: 10px; max-width: 49px; }
.myinfo { color: $font-color-s; margin-top: 20px;  margin-top: 15px; font-size: 12px; }
.myseal a { padding: 15px 0 0; }
}
@media (min-width: 767px) and  (max-width: 843px) {
.mynav2search button { display: none; }
}
@media (min-width: 767px) and  (max-width: 1141px) {
.mymenu li { padding: 0 2%; span { right: 2%; } }
}

/*	768-992	*/
@media (min-width: 768px) and (max-width: 992px) {
.mymenu li { font-size: 13px; }
.mybox li { padding: 3% 1.5%; a { font-size: 12px; } }
.mynav2search, .mynav2 { height: 50px; line-height: 50px; }
.myservices { span:first-child { font-size: 16px; line-height: 3; @include transition(color .2s);
			 					 &:hover{ color: $hover-color; } } }
.mysersta { margin-left: -10px; }
.mylink span { right: 10%; }
}
@media (min-width: 767px) and (max-width: 944px) {
.mytopnav .nav a, .mybtn-shopcar { padding: 15px 5px; }
}